<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生登录成功页面</title>
    <link rel="stylesheet" href="../fonts/RemixIcon_Fonts/remixicon.css">
    <link rel="stylesheet" href="../css/stu_load_success.css">
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> -->
    <script src="../utils/jquery-3.6.0.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>
</head>
<body>
    <!-- 导航的div -->
    <nav class="navbar nav_bak">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <a class="navbar-brand" href="#"><i class="ri-home-4-line color_i"></i></a>
                <span class="title">宿舍管理系统</span>
            </div>


            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">


                <ul class="nav navbar-nav navbar-right" id="nav_add_admin">

                    <li class="dropdown">
                        <!-- 管理员头像 -->

                        <a href="#" class="dropdown-toggle dropdown-add1" data-toggle="dropdown" role="button"
                            aria-haspopup="true" aria-expanded="false">
                            <i class="user_img">
                                <img src="../images/user_img.jpg">
                            </i>
                            1号管理员 <span class="caret"></span></a>
                        <ul class="dropdown-menu"  id="dropdown_menu_add1">
                            <li><a href="#">退出</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    <section class="clearfix">
        <!-- 左边的导航div -->
        <div class="section_left_box left">
            <ul class="nav nav-pills nav-stacked section_ul">
                <li><a href="javascript:;"><i class="ri-honour-line"></i>公告主页</a></li>
                <li><a href="javascript:;"><i class="ri-psychotherapy-line"></i>学生管理</a></li>
            </ul>
        </div>
        <!-- 右边的详情div -->
        <div class="section_right_box left">
            <!-- 面包屑导航的div -->
            <div>
                <ol class="breadcrumb_add">
                    <li>公告主页<a href="#">x</a></li>
                    <li>学生管理<a href="#">x</a></li>
                </ol>
            </div>
            <!-- 第一个公告主页的详情div -->
            <div class="display">
                <!-- 表格div -->
                <div>
                    <table class="table table-hover ">
                        <p class="table_p1">欢迎进入</p>
                        <p class="table_p2">公告</p>
                        <tr>
                            <td>
                                <p>公告1修</p>
                                <p class="td_special_css">公告1修</p>
                            </td>
                            <td class="td_special_num_css">2020-9-01 00:00:00</td>
                        </tr>
                        <tr>
                            <td>
                                <p>公告2</p>
                                <p class="td_special_css">公告1112222</p>
                            </td>
                            <td class="td_special_num_css">2020-9-02 00:00:00</td>
                        </tr>
                        <tr>
                            <td>
                                <p>公告3</p>
                                <p class="td_special_css">公告13333</p>
                            </td>
                            <td class="td_special_num_css">2020-9-03 00:00:00</td>
                        </tr>
                        <tr>
                            <td>
                                <p>公告4</p>
                                <p class="td_special_css">公告1144111</p>
                            </td>
                            <td class="td_special_num_css">2020-9-04 00:00:00</td>
                        </tr>
                        <tr>
                            <td>
                                <p>公告5</p>
                                <p class="td_special_css">公告115511</p>
                            </td>
                            <td class="td_special_num_css">2020-9-05 00:00:00</td>
                        </tr>

                    </table>
                </div>
                <!-- 分页的div -->
                <div class="section_page_box">
                    <nav aria-label="Page navigation">
                        <ul class="pagination">
                            <li>
                                <a href="#" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <li><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li>
                                <a href="#" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
            <!-- 第二个学生管理的详情div -->
            <div>
                <!-- 上面输入的div -->
                <div class="second_top_box">
                    <form class="navbar-form navbar-left" role="search">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="请输入学生姓名">
                        </div>
                        <button type="submit" class="btn btn_css_1">搜索</button>
                        <button type="submit" class="btn btn_css_1">重置</button>
                        <button type="submit" class="btn" id="btn_css_2">添加学生</button>
                    </form>
                </div>
                <!-- 下面表格的div -->
                <div class="second_bottom_box">
                    <table class="table table-bordered table_add_css1">
                        <tr class="tr_bg_css">
                            <th class="table_add_css1">学号</th>
                            <th class="table_add_css1">姓名</th>
                            <th class="table_add_css1">账号</th>
                            <th class="table_add_css1">学生所属宿舍</th>
                            <th class="table_add_css1">宿舍水电费余额（元）</th>
                            <th class="table_add_css1">宿舍状态</th>
                            <th class="table_add_css1">操作</th>
                        </tr>
                        <tr>
                            <td>101</td>
                            <td>学生1</td>
                            <td>101</td>
                            <td>1002</td>
                            <td>5</td>
                            <td>正常</td>
                            <td>
                                <!-- 查看缴费记录模态框 -->
                                <a href="#">
                                    <span class="" data-toggle="modal" data-target="#myModal">查看缴费记录</span>
                                </a>
                                <!-- 上面的缴费记录的Modal -->
                                <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
                                    aria-labelledby="myModalLabel">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal"
                                                    aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                                <h4 class="modal-title" id="myModalLabel2">缴费记录</h4>
                                            </div>
                                            <div class="modal-body modal_body_add1">
                                                <table class="table table_add_css1">
                                                    <tr class="table_add_css1 tr_bg_css">
                                                        <th class="table_add_css1">缴费金额</th>
                                                        <th class="table_add_css1">缴费时间</th>
                                                    </tr>
                                                    <tr>
                                                        <td>5</td>
                                                        <td>2021-5-23 17:12:12</td>
                                                    </tr>
                                                </table>
                                            </div>
                                            <!-- 装分页器的div -->
                                            <div class="page_add_1">
                                                <nav aria-label="Page navigation">
                                                    <ul class="pagination nav_add_1">
                                                        <li>
                                                            <a href="#" aria-label="Previous">
                                                                <span aria-hidden="true">&laquo;</span>
                                                            </a>
                                                        </li>
                                                        <li><a href="#">1</a></li>
                                                        <li>
                                                            <a href="#" aria-label="Next">
                                                                <span aria-hidden="true">&raquo;</span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </nav>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- 充值模态框 -->
                                <a href="#">
                                    <span class="" data-toggle="modal" data-target="#exampleModal"
                                        data-whatever="@mdo">修改</span>
                                    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
                                        aria-labelledby="exampleModalLabel">
                                        <div class="modal-dialog modal_dialog_add1" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <button type="button" class="close" data-dismiss="modal"
                                                        aria-label="Close"><span
                                                            aria-hidden="true">&times;</span></button>
                                                    <h4 class="modal-title modal_title_add1" id="exampleModalLabel3">
                                                        充值</h4>
                                                </div>
                                                <div class="modal-body">
                                                    <form>
                                                        <div class="form-group form_group_add3 clearfix">
                                                            <label for="inputEmail3"
                                                                class=" control-label control_label_add2 left">
                                                                <span
                                                                    class="star_add1">*
                                                                </span>充值
                                                            </label>
                                                            <div class="left">
                                                                <input type="text"
                                                                    class="form-control form_control_add1"
                                                                    id="inputEmail3" >
                                                                <p class="form_add_p2">充值金额不能为空</p>
                                                            </div>
                                                        </div>                

                                                    </form>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-default"
                                                        data-dismiss="modal">取消</button>
                                                    <button type="button" class="btn btn-primary">确定</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </td>
                        </tr>

                    </table>
                </div>
                <!-- 分页的div -->
                <div class="section_page_box">
                    <nav aria-label="Page navigation">
                        <ul class="pagination">
                            <li>
                                <a href="#" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <li><a href="#">1</a></li>
                            <li>
                                <a href="#" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>

            </div>
        </div>
    </section>

    
</body>
</html>